<template>
    <div class="table">
        <!-- top -->
        <div class="table-top">
            <div @click="addShop">批量上架</div>
        </div>
        <!-- 谈窗 -->
        <messBox :dialogVisible="dialogVisible" @addMss="addMss"></messBox>

        <!-- bom -->
        <div class="table-bom">
            <el-table ref="multipleTable" :data="spilList" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="日期" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip>
                </el-table-column>
                <!-- 编辑/删除 -->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="table-page">
                <!-- 总数 -->
                <div class="page-left">总计：{{ tableData.length }}</div>
                <!-- 分页 -->
                <el-pagination :page-size="toal" :current-page.sync="currPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background layout="prev, pager, next" :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import messBox from '../components/messgBox.vue'
export default {
    components: {
        messBox
    },
    name: '',
    data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: [],

            spilList: [],
            currPage: 1,
            toal: 10,

            // 弹框显示
            dialogVisible: false
        };
    },
    created() {
        this.spilList = this.tableData.slice(0, 10)
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // 老页数  this.currPage
            // 新页数  val
            // 原数组  this.tableData
            // 新数组
            this.spilList = this.tableData.slice(this.toal * (this.currPage - 1), val * this.toal)
            console.log(`当前页: ${val}`, this.spilList, this.currPage, this.toal);
        },
        // 添加数据
        addShop() {
            this.dialogVisible = true;
            console.log('添加数据', this.dialogVisible)

        },
        // 接受组件
        addMss(e) {
            this.dialogVisible = false;
        }
    },
    mounted() {

    }
};
</script>
<style scoped>
.table-top {
    display: flex;
    justify-content: flex-end;
}

.table-top div {
    width: 86px;
    height: 40px;
    border: 1px solid #507AFF;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 400;
    line-height: 23.17px;
    color: rgba(80, 122, 255, 1);
    border-radius: 10px;
    cursor: pointer;
}

.table-bom {
    margin-top: 15px;
    padding: 25px;
    border-radius: 16px;
    background: rgba(81, 123, 255, 0.03);
}

.table-page {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 80px;

    position: relative;
}

.page-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
</style>
